雖然還沒碰過被要求效能 a 代誌，但在 Code-Review 中也會被問這有必要用嗎？例如：常用的無敵星星，在 reset 上很好用，以及謠傳權重不要選太層次，或者為何要愛用雪碧圖（CSS Sprites）？CSS 檔案的封裝等等，其實都攸關著效能啊。今天就整理與探索更多關於優化效能，ＣＳＳ的部分。

如何測試性能？

最簡單的方式便是開起瀏覽器的開發者工具 DevTools 並選擇Performance，然後記錄頁面載入流程並分析效能瓶頸。

一些技巧，關於 CSS 的部分

減少 HTTP 請求：

• 合併 CSS 檔案：將多個 CSS 檔案合併成一個，減少 HTTP 請求次數。
• 利用 CSS Sprites 雪碧圖：將多個小圖片合併成一張，減少圖片載入的 HTTP 請求。

避免不必要的選擇器：

• 避免使用通用選擇器（如*），它會導致瀏覽器遍歷所有元素，影響效能。
• 盡量使用類別選擇器和 ID 選擇器，而不是過於複雜的選擇器。
• 避免嵌套選擇器層級過深，選擇器的層級越深，匹配速度越慢。

使用快取：

• 利用瀏覽器快取機制，確保 CSS 檔案被瀏覽器快取，以減少後續頁面載入時的請求。
• 設定適當的快取頭（如 Expires、Cache-Control），以控制快取時間。
• 將不必要的 CSS 檔案非同步加載，以確保頁面內容能夠更快地呈現給使用者。
• 使用<link rel="preload">標籤可以在背景下載 CSS 文件，而不會阻止頁面渲染。

使用字體子集：

• 如果使用自訂字體，只包括頁面上實際使用的字符，以減少字體檔案的大小。

避免過度使用不必要的!important：

• 避免過度使用!important標誌，因為它會增加調試和維護的難度，同時也可能導致效能問題。

參考資料與閱讀更多

Yahoo Developer Network - Best Practices for Speeding Up Your Web Site
MDN Web Performance
Google Developers - Web Performance
Essential Knowledge for Front-End Engineers (Paperback)
MDN Optimizing startup performance
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Reduce the scope and complexity of style calculations